// 给退出按钮绑定点击事件
$('.logout').on('click', function () {
  console.log('ok');
  //1. 询问用户是否退出
  // 2.如果用户退出了
  // a.清空token
  // b.跳转至登录页面
  layer.confirm('确认退出登录?', { icon: 3, title: '提示' }, function (index) {
    //do something
    // 清空本地Token
    localStorage.removeItem('token')
    // 跳转至登录页面
    location.href = '/login.html'
    // 关闭弹出层
    layer.close(index);
  });
})

// 封装个人信息
function initUserInfo() {
  console.log(1);
  axios.get('/my/userinfo'
  ).then(({ data: res }) => {
    console.log(res);
    renderUserInfo(res.data)
  }, (error) => {
    console.log('失败了!');

    // 1.判断'响应状态码是否等于401'
    // 2.如果是则清空token,并跳转到登录页
    console.dir(error)
    if (error.response.status == 401) {
      localStorage.removeItem('token')   //清空假token
      location.href = '/login.html'
    }
  })
}
initUserInfo()


// 封装用户个人信息
function renderUserInfo(data) {
  console.log(data);

  const name = data.nickname || data.username
  const textAvatar = name.charAt(0).toUpperCase()
  // 渲染头部用户信息
  // 判断用户是否有图片的头像,如果有执行if;否则执行else
  if (data.user_pic) {
    // 有图片头像
    $('#header-avatar').html(`<img src="${data.user_pic}"class="layui-nav-img">
        个人中心`)
  } else {

    // 没有图片头像,渲染文本头像
    $('#header-avatar').html(`<div class="text-avatar">${textAvatar}</div>
        个人中心`)
  }

  // 渲染侧边栏用户信息
  if (data.user_pic) {
    // 渲染图片头像
    $('.user-info-box').html(`<img src="${data.user_pic}"class="layui-nav-img">
          <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>
    `)
  } else {
    // 渲染文本头像
    $('.user-info-box').html(`
          <div class="text-avatar">${textAvatar}</div>
          <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>
        `)
  }
  // 在页面元素动态生成好之后,调用layui提供给的element.render()函数
  // 渲染指定区域效果
  layui.element.render('nav', 'header-nav')

}

